<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 共 有 的 CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrapValidator.min.css" rel="stylesheet">
    <link href="/static/css/font-awesome.css" rel="stylesheet"/>
    <link href="/static/css/style2.css" rel="stylesheet"/>

    <!-- 自 定 义 CSS -->
    {% block css %}{% endblock %}

    <title>API 测 试 平 台</title>
    <style>
        body {margin-top: 70px}
        small {font-size: 14px}
    </style>
</head>
<body>
    <!-- 导 航 条 -->
    <nav  class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="font-size:40px;font-family: 华文彩云;font-weight: bold;color: white">WeTest</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">用户手册</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">修改密码</a></li>
                            <li><a href="#">个人资料</a></li>
                            <li><a href="http://{{api_addr}}/API/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    {% block carousel %}{% endblock %}

    <!-- 正 文 内 容 -->
    <div class="container-fluid" style="margin-left: 50px">
        {% block content %}{% endblock %}
    </div>

    <!-- 侧 边 栏 -->
	<div id="wrapper">
        <div class="overlay"></div>
        <!-- Sidebar -->
        <nav id="sidebar-wrapper" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#"></a>
                </li>
                <li><a href="http://{{api_addr}}/index"><i class="fa fa-fw fa-home"></i> 主页</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-space-shuttle"></i> API 测 试 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        {% for i in range(pro_num) %}
                        <li><a href="http://{{api_addr}}/case_page/{{ pro_name_list[i] }}">{{ pro_name_list[i] }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-bar-chart"></i> API 报 告 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        {% for i in range(pro_num) %}
                        <li><a href="http://{{api_addr}}/report_page/{{ pro_name_list[i] }}">{{ pro_name_list[i] }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-fw fa-clock-o"></i> 定时任务监控</a></li>
            </ul>
        </nav>
        <!-- /#sidebar-wrapper -->

        <!-- 侧边栏 三条线 -->
        <div id="page-content-wrapper">
            <button style="margin-top:30px;" type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
                <span style="background-color: black;width: 80%" class="hamb-top"></span>
                <span style="background-color: black;width: 80%" class="hamb-middle"></span>
                <span style="background-color: black;width: 80%" class="hamb-bottom"></span>
            </button>
        </div>
        <!-- /#page-content-wrapper -->
    </div>

    <!-- 共 有 的 JS -->
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrapValidator.min.js" type="text/javascript"></script>
    <script src="/static/js/zh_CN.js" type="text/javascript"></script>

    <!-- 自 定 义 JS -->
    {% block js %}{% endblock %}

	<script type="text/javascript">
		$(document).ready(function () {
		    var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = false;
            <!-- 点击 侧边栏 三条线 -->
            trigger.click(function () {
                if (isClosed == true) {  <!-- 隐藏 三条线 -->
                    overlay.hide();
                    trigger.removeClass('is-open');
                    trigger.addClass('is-closed');
                    isClosed = false;
                } else {  <!-- 显示 三条线 -->
                    overlay.show();
                    trigger.removeClass('is-closed');
                    trigger.addClass('is-open');
                    isClosed = true;
                }
            });
		    <!-- 点击 侧边栏 三条线 -->
            $('[data-toggle="offcanvas"]').click(function () {
                $('#wrapper').toggleClass('toggled');
            });
		});
	</script>
</body>
</html>